<template>
  <div>
    <el-container>
      <el-header height="8vh" style="padding: 0">
        <nav-menu></nav-menu>
      </el-header>
      <el-container>
        <el-aside
          :width="this.isFord?'10vw':'5vw'"
          >
          <el-button
            icon="el-icon-s-unfold"
            type="primary"
            @click="ford"
            class="app-btn"></el-button>
          <nav-menu-func :is-ford="isFord" style="width: 100%"></nav-menu-func>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

  import NavMenuFunc from "./common/NavMenuFunc";
  import NavMenu from "./common/NavMenu";
  import {toggleClass} from "../util";
  export default {
    name: 'AppIndex',
    components: {NavMenu, NavMenuFunc},
    data(){
      return {
        width:'10vw',
        showBack:false,
        isFord:true,
        themeColor:'',
      }
    },
    watch:{
      $route(now,old){
        if(now.path=='/mainpage'){
          this.showBack=false;
        }else {
          this.showBack=true;
        }
        //console.log(JSON.stringify(this.$router))
      }
    },
    methods:{
      ford(){
        this.isFord=!this.isFord;
        this.$store.commit('UIState/setNavFord',this.isFord);
        this.width=this.isFord?'10vw':'5vw';
      },
      back(){
        this._func.back(this);
      }
    },
    created() {
      this.themeColor=this.$store.state.theme.themeColor;
      this.isFord=this.$store.state.UIState.navIsFord;
      toggleClass(document.body,`custom-${this.themeColor}`)
    }
  }
</script>

<style scoped>
.router-view{
  width: 90vw;
}
.app-btn{
  border: 0;
  width: 100%;
  border-radius: 0;
}
</style>

